<template>
	<view class="memorandumList">
		<view class="topBack">
			<view class="addPetTop">
				<view class="addPetTopTitleDiv">
					<view class="addPetTopTitleLeft"></view>
					<text class="addPetTopTitleText">{{petjson.nickname}}的备忘录</text>
				</view>
				<view class="memorandumItem" v-for="(item,index) in memorandumList" :key="index">
					<text class="memorandumItemLeft">{{item.date.split(' ') [0]}}</text>
					<image class="memorandumItemIcon" :src="item.icon"></image>
					<text class="memorandumItemText">{{item.desc}}</text>
				</view>
				<!-- <view class="memorandumItem">
					<text class="memorandumItemLeft">2023年10月30号</text>
					<image class="memorandumItemIcon" src="../../static/pet/icon2.png"></image>
					<text class="memorandumItemText">洗澡</text>
				</view>
				<view class="memorandumItem">
					<text class="memorandumItemLeft">2023年10月30号</text>
					<image class="memorandumItemIcon" src="../../static/pet/icon3.png"></image>
					<text class="memorandumItemText">接种疫苗</text>
				</view>
				<view class="memorandumItem">
					<text class="memorandumItemLeft">2023年10月30号</text>
					<image class="memorandumItemIcon" src="../../static/pet/icon4.png"></image>
					<text class="memorandumItemText">接种疫苗</text>
				</view>
				<view class="memorandumItem borderNone">
					<text class="memorandumItemLeft">2023年10月30号</text>
					<image class="memorandumItemIcon" src="../../static/pet/icon5.png"></image>
					<text class="memorandumItemText">喂药</text>
				</view> -->


			</view>
		</view>
		<button class="addMemorandumButton" @tap="addMemorandumState=true">添加备忘录</button>
		<!-- 添加备忘录弹窗 -->
		<view class="retrievedPopDiv" v-if="addMemorandumState" @tap="addMemorandumState=false">
			<view class="retrievedPopLi" @click.stop="addMemorandumState=false"
				style="background: url('https://chongwu.aitaoba.net/storage/uploads/20231118/4a569485369ab3ca33c967b97a5fde29.png') no-repeat;background-size: 100% 100%;">
				<text class="formTitle">描述</text>
				<input class="formInput" v-model="addFrom.smear" placeholder="请输入或选择描述" />
				<view class="memorandumTypeList">
					<view class="memorandumTypeItem" :class="{activeMemorandumType:activeIndex==index}"
						v-for="(item,index) in memorandumTypeList" :key="index" @click.stop="activeFun(item,index)">
						<image class="memorandumTypeItemImg" :src="item.icon"></image>
						<text class="memorandumTypeItemText">{{item.desc}}</text>
					</view>
				</view>
				<text class="formTitle topClass">时间</text>
				<input class="formInput timeTopClass" v-model="addFrom.time" placeholder="请选择时间" :disabled="true"
					@click.stop="show=true" />
				<button class="submitButton" @click.stop="addSubmit">保存</button>
			</view>
		</view>
		<!-- <u-picker mode="time" v-model="show" :params="params" @cancel="show=false" @confirm="qdTime"></u-picker> -->
		<u-calendar v-model="show" mode="date" btn-type="warning" active-bg-color="#ff9900"
			@change="handleChange"></u-calendar>
	</view>
</template>

<script>
	import {
		getDescList,
		addRecord,
		recordList
	} from '@/api/pet.js'
	export default {
		components: {

		},
		data() {
			return {

				activeIcon: '',
				petjson: {},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				memorandumList: [],
				memorandumTypeList: [

					// {
					// 	img: '../../static/pet/icon1.png',
					// 	text: '驱虫'
					// },
					// {
					// 	img: '../../static/pet/icon4.png',
					// 	text: '打疫苗'
					// },
					// {
					// 	img: '../../static/pet/icon5.png',
					// 	text: '喂药'
					// },
					// {
					// 	img: '../../static/pet/icon3.png',
					// 	text: '体检'
					// },
					// {
					// 	img: '../../static/pet/icon2.png',
					// 	text: '洗澡'
					// },

				],
				activeIndex: 0,
				addMemorandumState: false,
				addFrom: {
					smear: '',
					time: '',
				},
			};
		},

		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {
			// 获取备忘录配置列表
			this.getMemorandumTypeList();
		},

		onLoad(options) {
			console.log(JSON.parse(options.item), '看看页面过来的item')
			this.petjson = JSON.parse(options.item);
			this.getMemorandumList();
		},

		watch: {

		},
		methods: {
			getMemorandumList() {
				let data = {
					pet_id: this.petjson.id
				};
				console.log(data, '入参')
				recordList(data).then((res) => {
					console.log(res, '备忘录列表')
					if (res.code == 200) {
						this.memorandumList = res.data.list;
					}
				}).catch((res) => {
					console.log(res, 'catch')
				})
			},
			addSubmit() {
				if (!this.addFrom.smear) {
					uni.showToast({
						title: '请选择或输入描述',

					})
				} else if (!this.addFrom.time) {
					uni.showToast({
						title: '请选择时间',

					})
				} else {
					// 新增备忘录保存
					let data = {
						pet_id: this.petjson.id,
						desc: this.addFrom.smear,
						icon: this.activeIcon,
						date: this.addFrom.time
					};
					addRecord(data).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '新增成功',

							})
							// 备忘录列表
							this.getMemorandumList();
							this.addMemorandumState = false;
						}
					}).catch()
				}

			},
			getMemorandumTypeList() {

				getDescList({}).then((res) => {
					console.log(res, '看看备忘录配置列表')
					if (res.code == 200) {
						this.memorandumTypeList = res.data;
						this.addFrom.smear = res.data[0].desc;
						this.activeIcon = res.data[0].icon;
					}
				}).catch()
			},

			activeFun(item, index) {

				this.activeIndex = index;
				this.addFrom.smear = item.desc;
				this.activeIcon = item.icon;
			},
			qdTime(e) {
				console.log(e, '选择的时间')
				//  + ' ' + e.hour + ':' + e.minute + ':' + e.second;
				this.addFrom.time = e.year + '-' + e.month + '-' + e.day
			},

			// 时间
			handleChange(e) {
				console.log(e, 'eee')
				this.addFrom.time = e.year + '-' + e.month + '-' + e.day
			}
		},
	};
</script>

<style lang="scss" scoped>
	.memorandumList {
		width: 100%;
		display: flex;
		flex-direction: column;

	}

	.topBack {
		width: 750rpx;
		height: 257rpx;
		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);
		border-radius: 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40rpx;
		box-sizing: border-box;
	}

	.addPetTop {
		width: 690rpx;
		// height: 355rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		padding: 43rpx 39rpx 30rpx 21rpx;
		box-sizing: border-box;
	}





	.addPetTopTitleDiv {
		display: flex;
		align-items: center;
	}

	.addPetTopTitleLeft {
		width: 8rpx;
		height: 30rpx;
		background: #FAE24E;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		border: 1rpx solid #683518;
	}

	.addPetTopTitleText {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		margin-left: 9rpx;
	}

	.memorandumItem {
		width: 630rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 0rpx;
		border-bottom: 1rpx solid #707070;

		display: flex;
		align-items: center;
		padding-left: 30rpx;
		box-sizing: border-box;

		&:last-child {
			border-bottom: 0;
		}
	}

	.borderNone {
		border-bottom: none;
	}

	.memorandumItemLeft {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
	}

	.memorandumItemIcon {
		width: 28rpx;
		height: 28rpx;
		margin-left: 129rpx;
	}

	.memorandumItemText {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		margin-left: 12rpx;
	}

	.addMemorandumButton {
		width: 750rpx;
		height: 98rpx;
		background: #FED24C;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #5D5353;
		text-align: center;
		line-height: 98rpx;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.retrievedPopDiv {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 5;
	}

	.retrievedPopLi {
		width: 750rpx;
		height: 1152rpx;

		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 6;

		animation: heightTransition 0.1s ease-in-out;
	}

	.formTitle {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #2E2908;
		position: absolute;
		top: 290rpx;
		left: 30rpx;
		z-index: 7;
	}

	.formInput {
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		border: 2rpx solid #683518;
		outline: none;
		padding-left: 30rpx;
		box-sizing: border-box;
		position: absolute;
		top: 346rpx;
		left: 30rpx;
		z-index: 7;


	}

	.memorandumTypeList {
		display: flex;
		align-items: center;
		position: absolute;
		top: 470rpx;
		left: 30rpx;
		z-index: 7;
	}

	.memorandumTypeItem {
		height: 48rpx;
		background: #FFFAD9;
		border-radius: 10rpx;

		border: 2rpx solid #683518;
		display: flex;
		align-items: center;
		padding: 6rpx 20rpx 5rpx 9rpx;
		box-sizing: border-box;
		margin-right: 12rpx;
	}

	.activeMemorandumType {
		background: #FAE24E;
	}

	.memorandumTypeItemImg {
		width: 24rpx;
		height: 24rpx;
	}

	.memorandumTypeItemText {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #683518;
		margin-left: 4rpx;
	}

	.topClass {
		top: 558rpx;
	}

	.timeTopClass {
		top: 614rpx;
	}

	@keyframes heightTransition {
		0% {
			height: 0;
		}

		50% {
			height: 576rpx;
		}

		100% {
			height: 1152rpx;
		}
	}

	.submitButton {
		width: 690rpx;
		height: 88rpx;
		background: #FED24C;
		box-shadow: 0rpx 6rpx 12rpx 1rpx rgba(63, 29, 3, 0.1608);
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		text-align: center;
		line-height: 88rpx;
		outline: none;
		border: none;
		position: absolute;
		top: 778rpx;
		left: 30rpx;
		z-index: 7;
	}
</style>